<template>
 <view class="lishifk-container mainpadding mainbgc">
   <view class="history-list">
	   <view class="flexcenter1" v-if="!list.data.length">
	   	<view class="placeholderimg" style="margin-top: 300rpx;">
	   		<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
	   	</view>
	   	<view class="zanwushuju">暂无数据~</view>
	   </view>
     <view class="history-item mainpadding ffffff" v-for="item in list.data" :key="item.id">
       <view class="title">
         <view class="date">{{item.createtime_text}}</view>
         <view :class="[ item.status==1 ?  'status':'chDone' ]">{{ item.status==1 ? '待处理' : '已处理' }}</view>
       </view>
 		<view class="boxs">
 			<view class="fk-content">{{item.des}}</view>
 			  <view  class="flexleft margin_top jietubox"  v-if="item.images">
 			   <view class="wentibox" v-for="(item1,index) of item.images_text" :key="index">
 			    <image  :src="item1" mode=""></image>
 			   </view>
 			</view>
 		</view>
       <view class="huifu date"  v-if="item.status==2">{{item.cltime_text}}回复:{{item.remarks}}</view>
 	  </view>
   </view>
 </view>
</template>

<script>
 const httpRequest = require("@/common/httpRequest.js")
  export default {
    data() {
      return {
       list:{
       	data:[]
       },
       limit:12,
       page:1,
      }
    },
    methods: {
      init(isPage, page) {
      	let _this = this;
      	httpRequest.request('api/user/getFeedbackList', 'GET', {
      		page: page || 1,
      		limit: _this.limit,
      	}, false, false, true).then(res => {
			console.log(res.data)
      		if (res.code == 1) {
      			let resList = res.data;
      			let dataList = _this.list;
      			if (isPage == true) {
      				_this.list.data = dataList.data.concat(resList.data);
      			} else {
      				this.list = res.data
      				_this.list.data = resList.data;
      			}
      		}
      			
      	}).catch(err => {
      		httpRequest.toast(err.msg);
      	})
      },
    },
	onShow() {
		this.init()
	},
	onReachBottom() {
		let _this = this;
		let list = _this.list;
		let page = _this.page;
		if (list.last_page <= page) {
			return false;
		}
		page++;
		_this.page = page;
		_this.init(true, page);
	},
    computed: {
     
    }
  }
</script>

<style lang="scss" scoped>
  
 .history-item {
   border-radius: 14rpx;
   margin-bottom: 30rpx;
 }
 
 .title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 30rpx;
 	border-bottom: dashed 2rpx rgba(153, 153, 153, 1);
 }
 
 .date {
   font-size: 30rpx;
   font-family: PingFang SC-Heavy, PingFang SC;
   font-weight: 800;
   color: #333333;
 }
 
 .status {
   font-size: 30rpx;
   font-family: PingFang SC-Heavy, PingFang SC;
   font-weight: 800;
   color: #FD463E;
 }
 
 .fk-content {
   font-size: 28rpx;
   font-family: PingFang SC-Medium, PingFang SC;
   font-weight: 500;
   color: #333333;
   margin: 30rpx 0;
 	margin-top: 0;
 }
 
 .jietubox {
 	flex-wrap: wrap;
 }
 .wentibox {
 	width: 25%;
 	display: flex;
 	align-items: center;
 	image {
 	  width: 124rpx;
 	  height: 124rpx;
 	  border-radius: 14rpx;
 	}
 }
 .chDone {
   font-size: 30rpx;
   font-family: PingFang SC-Heavy, PingFang SC;
   font-weight: 800;
   color: #50B674;
 }
 .boxs{
 	  padding: 30rpx 0;
 }
 .reply {
   font-size: 24rpx;
   font-family: PingFang SC-Heavy, PingFang SC;
   font-weight: 800;
   color: #333333;
 }
 .huifu{
 	  border-top:1rpx solid rgba(153, 153, 153, 0.1) ; 
 	  padding:  30rpx 0;
 }
</style>